import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { argTypesView } from "./helpers/helpers";

export const codeDocs= { source: { code: `component.NewCodeBlock("package main\n\nimport "fmt"\n\nfunc main() {\n\tfmt.Println("hello world")\n}")`}}

export const codeView = {
  config: {
    value:
      'package main\n\nimport "fmt"\n\nfunc main() {\n\tfmt.Println("hello world")\n}',
  },
  metadata: {
    type: 'codeBlock',
  },
};

export const CodeStoryTemplate = args => ({
  template: `<app-view-code [view]= "view"></app-view-code>`,
  argTypes: argTypesView,
  props: {view: args.view},
});

<h1>Code component</h1>
<h2>Description</h2>

<p>The Code component is used for strings that require formatting and wordwrap. It is typically used in a Table component for showing configuration files along with a copy button.</p>
<h2>Example</h2>

<Meta title="Components/Code" argTypes = { argTypesView } />

<Canvas withToolbar>
  <Story name="Code component"
         parameters={{ docs: codeDocs }}
         args= {{ view: codeView }}>
    { CodeStoryTemplate.bind({}) }  </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = "Code component" />
